<template>
  <div>
    <el-drawer :title="title" :visible.sync="showConfig"
               :modal-append-to-body="false"
               :close-on-press-escape="false"
               :wrapperClosable="false"
               :size="'600px'"
               @close="cancel()"
               direction="rtl" :modal="false" destroy-on-close custom-class="demo-drawer">
      <div class="demo-drawer__content">
        <div class="rule-box">
          <component :is="componentName" @ruleEdit="ruleEdit" ref="ruleComponent" @closeTable="closeTable"
                     @checkRuleGet="checkRuleGet"
                     :config="config"/>
        </div>
        <div class="demo-drawer__footer">
          <el-button size="small" @click="backPage()">取 消</el-button>
          <el-button type="primary" :loading="loading" size="small" @click="submitline">确 定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import ruleTable from "./rule-table" // 加班规则
import editRule from "./editRule"; // 编辑加班规则
import attend_time from "./attend_time"; // 考勤时间
import attend_user from "./attend_user"; // 考勤时间
import field_settings from "./field_settings";

export default {
  name: "rule",
  props: ['visible', 'ruleTime', 'pagetype', 'param'],
  components: {
    ruleTable,
    editRule,
    attend_time,
    attend_user,
    field_settings
  },
  data() {
    return {
      showConfig: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined
      },
      total: 0,
      ruleList: [],
      loading: false,
      componentName: '',
      config: null,
      title: ''
    }
  },
  watch: {
    visible() {
      let that = this
      this.showConfig = this.visible
      if (this.visible) {
        if (this.pagetype === 'ruleTable') {
          this.title = '选择加班规则'
          this.config = this.$deepCopy(this.param)
        } else if (this.pagetype === 'attend_time') {
          this.title = '考勤时间'
          this.config = this.$deepCopy(this.param)
        } else if (this.pagetype === 'attend_user') {
          this.title = '考勤人员'
          this.config = this.$deepCopy(this.param)
        } else if (this.pagetype === 'field_settings') {
          this.title = '编辑外勤规则'
          this.config = this.$deepCopy(this.param)
        }
        this.componentName = this.pagetype
        if (this.pagetype !== 'attend_user' && this.pagetype !== 'field_settings') {
          this.$nextTick(() => {
            that.$refs.ruleComponent.getList()
          })
        }
      } else {
        this.componentName = 'ruleTable'
      }
    }
  },
  methods: {
    ruleEdit(row) {
      this.config = row
      this.componentName = 'editRule'
    },
    submitline() {
      let that = this
      if (this.componentName === 'editRule') {
        this.$refs.ruleComponent.submit()
      } else if (this.componentName === 'ruleTable') {
        this.$nextTick(() => {
          that.$refs.ruleComponent.getCheckFn()
        })
      } else if (this.componentName === 'attend_time') {
        this.$refs.ruleComponent.submit()
      } else if (this.componentName === 'attend_user') {
        this.$refs.ruleComponent.submit()
      } else if (this.componentName === 'field_settings') {
        this.$refs.ruleComponent.submit()
      }
    },
    cancel() {
      this.$emit('update:visible', false)
    },
    closeTable() {
      let that = this
      this.componentName = 'ruleTable'
      this.$nextTick(() => {
        that.$refs.ruleComponent.getList()
      })
    },
    backPage() {
      let that = this
      if (this.componentName === 'editRule') {
        this.componentName = 'ruleTable'
        this.$nextTick(() => {
          that.$refs.ruleComponent.getList()
        })
      } else if (this.componentName === 'ruleTable') {
        this.cancel()
      } else if (this.componentName === 'attend_time') {
        this.cancel()
      } else if (this.componentName === 'attend_user') {
        this.cancel()
      }
    },
    // 选择规则
    checkRuleGet(row) {
      this.$emit('getParam', {
        type: row.type,
        data: row.data
      })
      this.cancel()
    }
  }
}
</script>

<style scoped>
.rule-box {
  padding: 10px 20px;
}
</style>
